<template>
  <div class="view-box">
    <div class="hd">
      <a-row>
        <a-col :span="12">{{ title }}</a-col>
      </a-row>
    </div>
    <div class="hb">
      <a-row>
        <a-col :span="12" style="padding: 16px; border-right: 1px solid #e8e8e8">
          <div class="title-hd">
            <a-input-search v-model:value="treeInfo.value" placeholder="搜索已选属性" />
          </div>
          <BaseTree :show-search="false" :checked-keys="treeInfo.checkedKeys" :tree-data="treeData" :default-expand-all="false" :block-node="true" :check-strictly="false" @on-check="onCheck"> </BaseTree>
        </a-col>
        <a-col :span="12" style="padding: 16px">
          <div class="right-list-view">
            <div class="title-hd">已选择 ({{ treeInfo.rightSelectList.size }}个)</div>
            <div>
              <div v-for="v in treeInfo.rightSelectList" :key="v.id" class="list-item">
                <a-alert :message="v.name" type="success" closable @close="onClose(v.id, v.parentId)" />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div></div>
  </div>
</template>
<script setup lang="ts">
import BaseTree from "@/components/Basics/BaseTree.vue"

interface ITreeIterm {
  name: string
  id: string
  children: ITreeIterm[]
  [propsName: string]: any
}

interface Props {
  treeData?: []
  defaultCheckedKeys?: { id: string }[]
  title: string
}
const props = withDefaults(defineProps<Props>(), {
  treeData: () => [],
  defaultCheckedKeys: () => [],
})

//搜索和右侧已选中数据
const treeInfo = reactive({
  checkedKeys: [],
  rightSelectList: [],
  value: "",
})

watch(
  () => props.defaultCheckedKeys,
  val => {
    if (val && val.length) {
      treeInfo.checkedKeys = val
      setUpdateSelectAry()
    }
  },
  {
    deep: true,
  },
)
//点击checkbox触发，更新后侧被选中数据
const onCheck = (ids: string[], item: object): void => {
  console.log(1111111111111111)

  treeInfo.checkedKeys = ids
  setUpdateSelectAry()
}

//右侧列表单击关闭触发事件
const onClose = (id: string, parentId: string) => {
  let ary = treeInfo.checkedKeys.filter(checkedId => {
    if (checkedId != id) return true
  })
  ary = ary.filter(checkedId => {
    if (checkedId != parentId) return true
  })
  treeInfo.checkedKeys = ary
}

//更新右侧数据
const setUpdateSelectAry = () => {
  let result = []
  treeInfo.rightSelectList = []
  const getObj = ary => {
    treeInfo.checkedKeys.forEach(checkedId => {
      ary.forEach(v => {
        if (checkedId === v.id && v.parentId) result.push(v)
        if (v.children) getObj(v.children)
      })
    })
  }
  getObj(props.treeData)

  treeInfo.rightSelectList = new Set([...result])
  console.log(treeInfo.rightSelectList)
}
</script>

<style lang="less" scoped>
.view-box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .hd {
    padding: 12px;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
  }

  .hb {
    .title-hd {
      margin-bottom: 10px;
      height: 30px;
    }
    .right-list-view {
      .list-item {
        margin: 10px 0;
      }
    }
  }
}
</style>
